<template>
	<div class="components-container">
		<el-button @click="dialogTableVisible = true" type="primary"
		>open a Drag Dialog
		</el-button
		>
		<el-dialog
				:visible.sync="dialogTableVisible"
				@dragDialog="handleDrag"
				title="Shipping address"
				v-el-drag-dialog
		>
			<el-select placeholder="请选择" ref="select" v-model="value">
				<el-option
						:key="item.value"
						:label="item.label"
						:value="item.value"
						v-for="item in options"
				/>
			</el-select>
			<el-table :data="gridData">
				<el-table-column label="Date" property="date" width="150"/>
				<el-table-column label="Name" property="name" width="200"/>
				<el-table-column label="Address" property="address"/>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import elDragDialog from '@/directive/el-dragDialog'; // base on element-ui

	export default {
		name: 'DragDialogDemo',
		directives: {elDragDialog},
		data() {
			return {
				dialogTableVisible: false,
				options: [
					{value: '选项1', label: '黄金糕'},
					{value: '选项2', label: '双皮奶'},
					{value: '选项3', label: '蚵仔煎'},
					{value: '选项4', label: '龙须面'},
				],
				value: '',
				gridData: [
					{
						date: '2016-05-02',
						name: 'John Smith',
						address: 'No.1518,  Jinshajiang Road, Putuo District',
					},
					{
						date: '2016-05-04',
						name: 'John Smith',
						address: 'No.1518,  Jinshajiang Road, Putuo District',
					},
					{
						date: '2016-05-01',
						name: 'John Smith',
						address: 'No.1518,  Jinshajiang Road, Putuo District',
					},
					{
						date: '2016-05-03',
						name: 'John Smith',
						address: 'No.1518,  Jinshajiang Road, Putuo District',
					},
				],
			};
		},
		methods: {
			// v-el-drag-dialog onDrag callback function
			handleDrag() {
				this.$refs.select.blur();
			},
		},
	};
</script>
